<template>
  <div class="container">
    <!-- <pre>{{ tabs }}</pre> -->
    <div class="top">
      <b v-for="(v, i) in tabs" :key="v.id"
        :class="activeIndex === i ? 'active': ''"
        @click="activeIndex = i "
      >{{ v.title }}</b>
    </div>
    <div class="mid">
      <input type="text" placeholder="请搜索" v-model="searchValue">
    </div>
    <List :tabs="tabs" :searchList="searchList" v-if="tabs.length"/>
  </div>
</template>

<script>
import List from './components/List.vue'
import axios from "axios";
export default {
  created() {
    axios.get("/tabs").then(resp => (this.tabs = resp.data));
  },
  data() {
    return {
      tabs: [],
      activeIndex: 0,
      searchValue: ''
    };
  },
  computed: {
    searchList() {
      return this.tabs[this.activeIndex].children.filter(item => {
        return item.title.includes(this.searchValue)
      })
    }
  },
  components: {
    List
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
b {
  padding: 6px 12px;
}
b.active {
  color: red;
}

.container {
  width: 800px;
  margin: auto;
}

</style>